<template>
	<rui-card padding="0" radius="20">
		<view class="weather-box">
			<view class="weather-box_info">
				<view class="weather-box_info_temperature">
					20°
				</view>
				<view class="weather-box_item_day">
					 今天 多云
					 <!-- 海拔72m -->
					<text class="weather-box_item_quality"> 优</text>
				</view>
			</view>
			<view class="weather-box_item">
			
				<view class="weather-box_item_day">
					明天 小雨
				</view>
			</view>
			<view class="weather-box_item">
		
				<view class="weather-box_item_day">
					后天 中雨
				</view>
			</view>
		</view>
		<view class="info">
			<view class="item" v-for="(item,index) in info" :key="index">
				<view class="label">
					{{item.label}}
				</view>
				<view class="value">
					{{item.value}}
				</view>
			</view>
		</view>
	</rui-card>
	

</template>

<script setup>
	import {
		ref
	} from "vue";

	let info = ref([{
			label: "游玩天数",
			value: "3-7天"
		},
		{
			label: "最佳月份",
			value: "4月"
		},
		{
			label: "合适人群",
			value: "蜜月度假，毕业旅行"
		},
	])
</script>

<style lang="scss" scoped>
	.weather-box {
		background: var(--color);
		padding: 20rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_info {
			width: calc(100% - 300rpx);
			&_temperature {
				font-size: 50rpx;
			}
		}
		
		&_item{
			width: 200rpx;
			text-align: center;
			border-right: 1rpx solid rgba(255,255,255, .5);
			&:last-child{
				border-right: none;
			}
			&_icon{
				display: inline-block;
				margin-bottom: 10rpx;
			}
			&_day{
				font-size: 24rpx;
			}
			&_quality{
				background: #fff;
				color: var(--color);
				border-radius: 5rpx;
				padding: 0 10rpx;
				margin-left: 20rpx;
			}
		}

	}

	.info {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;

		.item {

			.label {
				color: #999;
				font-size: 24rpx;
			}

			.value {
				font-size: 32rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>